<template>
  <div class="aside">
    <!-- 组件菜单 -->
    <div class="aside-chart" :class="{closed: !menuStatus.chart}">
      <div class="aside-top">
        <div class="aside-top-left">
          组件 <i class="my-icon icon-chart-trend-fill"></i>
        </div>
        <div class="aside-top-right">
          <div class="btn">
            <span class="btn-item" :class="{active: mod === 1}" @click="mod = 1">
              <i class="my-icon icon-list2"></i>
            </span>
            <span class="btn-item" :class="{active: mod === 2}" @click="mod = 2">
              <i class="my-icon icon-columns"></i>
            </span>
          </div>
        </div>
      </div>

      <div class="aside-main">
        <div class="aside-chart-menu">
          <div class="menu-level1">
            <div class="menu-level1-item" v-for="item in options"
                 :key="item.key"
                 :class="{active: item.key === activeKey1}" @click="onMenu1Click(item)">
              <i class="my-icon" :class="item.icon"></i>
              <div>{{item.name}}</div>
            </div>
          </div>
        </div>
        <div class="aside-chart-view">
          <div class="menu-level1">
            <div class="menu-level1-item" v-for="type in types"
                 :key="type"
                 :class="{active: type === activeType}" @click="onToggleActive(type)">
              {{type}}
            </div>
          </div>
          <div class="chart-content">
            <div class="chart-content-box" :class="{'is-column': mod === 2}">
              <div class="item-box"
                   v-for="(item, index) in childList"
                   draggable="true"
                   :cptKey="item.cptKey"
                   @dragstart="dragStart"
                   :key="index">
                <img class="item-box-img" :src="item.icon || '/img/bar_x.png'" />
                {{item.name}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图层 -->
    <div class="aside-layer" :class="{closed: !menuStatus.layer}">
      <div class="aside-top">
        <div class="aside-top-left">
          图层 <i class="my-icon icon-map"></i>
        </div>
      </div>
      <div class="aside-layer-content">
        <draggable animation="300" @update="onMoveCallback">
          <div  v-for="item in selectedComponents" :key="item.id">
            <!-- 单组件 -->
            <div class="layer-item" v-if="!item.isGroup" :class="{selected: selectedKey === item.id}" @click="onToggle($event,item)">
              <div class="layer-item-inner flex-cc" >
                <div class="layer-item-img">
                  <img class="item-box-img" :src="item.icon"  />
                </div>
                <div class="layer-item-txt">
                  {{item.cptTitle}}
                </div>
                <div class="layer-item-icon">
                  <i class="my-icon icon-unlock" v-if="!item.status.lock" @click="onLock(item)"></i>
                  <i class="my-icon icon-lock" v-else  @click="onUnLock(item)"></i>
                  <i class="my-icon icon-invisible" v-if="item.status.hide" @click="onShow(item)"></i>
                  <i class="my-icon icon-visible" v-else @click="onHide(item)"></i>
                </div>
                <div class="select-model"></div>
              </div>
            </div>

            <!-- 分组 -->
            <div v-else class="layer-group" >
              <div class="layer-item" :class="{selected: selectedKey === item.id}" @click="onToggle($event, item)">
                <div class="layer-item-inner flex-cc">
                  <div class="layer-item-folder">
                    <i class="my-icon icon-folder-fill"></i>
                  </div>
                  <div class="layer-item-txt">
                    {{item.cptTitle}}
                  </div>
                  <div class="layer-item-icon">
                    <i class="my-icon icon-unlock" v-if="!item.status.lock" @click.stop="onLock(item)"></i>
                    <i class="my-icon icon-lock" v-else  @click.stop="onUnLock(item)"></i>
                    <i class="my-icon icon-invisible" v-if="item.status.hide" @click.stop="onShow(item)"></i>
                    <i class="my-icon icon-visible" v-else @click.stop="onHide(item)"></i>
                  </div>
                  <div class="select-model"></div>
                </div>
              </div>
              <collapse-transition >
                <div v-show="!item.collapsed">
                  <div class="layer-group-list-item" v-for="groupItem in item.groupList" :key="groupItem.id">
                    <div class="layer-item" :class="{selected: selectedKey === groupItem.id}" @click="onToggle($event,groupItem)">
                      <div class="layer-item-inner flex-cc" >
                        <div class="layer-item-img">
                          <img class="item-box-img" :src="item.icon" />
                        </div>
                        <div class="layer-item-txt">
                          {{groupItem.cptTitle}}
                        </div>
                        <div class="select-model"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </collapse-transition>
            </div>

          </div>
        </draggable>

      </div>
    </div>
  </div>
</template>

<script>
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import _ from 'lodash'
import draggable from 'vuedraggable'
import {options} from '@/package/tools'

export default {
  name: 'layout-aside',
  cnName: '侧边',
  components: {
    CollapseTransition,
    draggable
  },
  props: {
    selectedComponents: Array,
    currentCptIndex: Number,
    menuStatus: Object
  },
  data() {
    return {
      options: [],
      activeKey1: '',
      children1: [],
      activeType: '全部',
      mod: 1,
      selectedKey: ''
    }
  },
  methods: {
    init() {
      this.options = options
      this.activeKey1 = options[0].key
      this.children1 = options[0].children || []
    },
    onMenu1Click(item) {
      if(item.key === this.activeKey1) {
        return
      }
      this.activeKey1 = item.key
      this.children1 = item.children || []
      this.onToggleActive()
    },
    onToggleActive(type = '全部') {
      this.activeType = type
    },
    dragStart(e) {
      let copyDom = e.currentTarget.cloneNode(true);
      this.$emit('dragStart', copyDom);
    },
    onLock(item) {
      this.$emit('onLock', item)
    },
    onUnLock(item) {
      item.status.lock = false
    },
    onShow(item) {
      item.status.hide = false
      this.$emit('onShow', item)
    },
    onHide(item) {
      item.status.hide = true
    },
    onToggle(event, item) {
      if(item.isGroup) {
        item.collapsed = !item.collapsed
      }
      this.selectedKey = item.id
      this.$emit('onSelect', event, item)
    },
    onMoveCallback(evt) {
      const {oldDraggableIndex, newDraggableIndex} = evt
      const moveTarget = this.selectedComponents.splice(oldDraggableIndex, 1)[0]
      this.selectedComponents.splice(newDraggableIndex, 0, moveTarget)
    }
  },
  computed: {
    types() {
      const types = this.children1.map(o => o.type)
      types.unshift('全部')
      return _.uniq(types)
    },
    childList() {
      if(this.activeType === '全部') {
        return this.children1
      }
      return this.children1.filter(o => o.type === this.activeType)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
.aside {
  display: flex;
  height: 100%;
  color: var(--text-color);
  font-size: 14px;
  user-select: none;
  box-sizing: border-box;

  &-top {
    height: 46px;
    background-color: var(--aside-level1-bg);
    border-right: 1px solid var(--bd-color);
    border-bottom: 1px solid var(--bd-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 8px;

    &-left {
      white-space: nowrap;
    }
    &_right {
      width: 180px;
    }
  }
  &-main {
    display: flex;
    height: calc(100% - 42px);
  }

  &-chart {
    border: 1px solid var(--bd-color);
    background-color: var(--bg-main);
    border-left-width: 0;
    transition: all 0.4s;
    width: 321px;

    &.closed {
      width: 70px;

      .aside-top-right {
        display: none;
      }
    }

    &-menu {
      border-bottom: 1px solid var(--bd-color);
      background-color: var(--aside-level1-bg);
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .menu-level1 {
      width: 70px;
      height: 100%;
      overflow-y: auto;
      background-color: var(--menu-level1-bg);

      &-item {
        padding: 12px;
        text-align: center;
        margin: 6px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color .3s var(--n-bezier);

        &:hover{
          background-color: var(--menu-hover-bg);
        }
        &.active {
          color: var(--menu-active-color);
          background-color: var(--menu-active-bg);
        }
      }
    }

    &-view {
      flex: 1;
      display: flex;

      .menu-level1 {
        background-color: var(--aside-level2-bg);
      }

      .menu-level1-item {
        padding: 6px ;
        font-size: 13px;
        border-radius: 3px;
      }

      .chart-content {
        width: 180px;
        overflow-y: auto;

        &-box {
          display: flex;
          padding: 10px;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 9px;
          transition: all 0.7s linear;

          &.is-column {
            flex-direction: row;
            .item-box {
              padding: 5px;
              width: 47%;
              font-size: 10px;
            }
          }
        }
      }
    }

    .item-box {
      padding: 10px;
      background-color: var(--aside-box-bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 5px;
      box-sizing: border-box;
      transition: all .3s linear;
      width: 100%;

      &-img {
        width: 100%;
        max-height: 100%;
        user-select: none;
        pointer-events: none;
      }
    }
  }

  .flex-cc {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  &-layer {
    width: 200px;
    transition: all 0.4s;
    background-color: var(--aside-level2-bg);

    &.closed {
      width: 0;
    }


    &-content {
      height: calc(100% - 42px);
      overflow-y: auto;
      font-size: 12px;
    }

    .layer-item {
      position: relative;
      height: 52px;
      width: 90%;
      margin: 5px 5% 5px;
      border-radius: 5px;
      cursor: pointer;
      border: 1px solid rgba(0, 0, 0, 0);

      &:hover {
        background-color: var(--layer-hover-bg);
        .layer-item-icon i {
          opacity: 1;
        }
      }
      &.selected {
        border: 1px solid var(--menu-active-color);

        .select-model {
          opacity: 0.3;
          transition: all 0.4s;
        }
      }

      &-inner {
        z-index: 1;
        padding: 6px 5px;
        justify-content: start !important;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
      }
      &-img {
        flex-shrink: 0;
        height: 52px;
        border-radius: 5px;
        overflow: hidden;
        border: none !important;
        padding: 2px;
        display: inline-flex;
        max-height: 100%;
        max-width: 100%;

        img {
          object-fit: contain;
          border-radius: inherit;
        }
      }
      &-txt {
        white-space: nowrap;
        display: inline-block;
        vertical-align: bottom;
        max-width: 100%;
        margin-left: 5px;
        margin-right: auto;
      }
      &-icon {
        white-space: nowrap;
        i {
          margin-left: 0.25em;
          font-size: 12px;
          opacity: 0;
          transition: all 0.4s;
        }
      }

      &-folder {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .select-model {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--menu-active-color);
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
      }
    }

    .layer-group {
      position: relative;
      margin-bottom: 5px;

      .root-item-content {
        height: 52px;
        cursor: pointer;
        border-radius: 5px;
        border: 1px solid rgba(0, 0, 0, 0);
      }

      &-list-item {
        position: relative;
        width: 95% !important;
        margin-left: 4%;
      }
    }

  }

}
</style>
